<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: rgb(211, 110, 111, 0.6);
            border: solid 1px #f00;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 400px;
            top: 200px;
        }

        #b {
            left: 500px;
            top: 400px;
        }
    </style>
</head>

<body>
    <div id="a"></div>
    <div id="b"></div>
    <script>
        var a = document.querySelector('#a'),
            b = document.querySelector('#b');
        var isdown = false;

        var ax = a.offsetLeft;
        var ay = a.offsetTop;
        var cx = 0;
        var cy = 0;
        b.onmousedown = function (e) {
            isdown = true;
            cx = e.clientX - b.offsetLeft;
            cy = e.clientY - b.offsetTop;
        }
        function pengzhuang(bx, by) {
			if(Math.abs(ax-bx) < 100 && Math.abs(ay - by) < 100){
				return true;
			}
            if (ax + 100 > bx && ax < bx && ay + 100 > by && ay < by) {
                return true;
            }
            if (bx + 100 > ax && bx < ax && by + 100 > ay && by < ay) {
                return true;
            }
            return false;
        }
        b.onmouseup = () => isdown = false;
        b.onmousemove = (e) => {
            if (isdown) {
                var left = e.clientX - cx;
                var top = e.clientY - cy;
                if (pengzhuang(left, top)) {
                    b.style.background = "#f00";
                } else {
                    b.style.top = top + 'px';
                    b.style.left = left + 'px';
                    b.style.background = "rgb(211, 110, 111, 0.6)";
                }
            }
        }
    </script>
</body>

</html>